<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Diamond Pattern</title>

    <style>

        body {

            font-family: 'Courier New', Courier,   monospace;

            font-size: 30px;

        }

        .container {

            width: max-content;

            margin: 0 auto;

            background-color: rgb(243, 255, 175);

            padding: 20px 100px;

            text-align: center;

        }
        .blue {

        color: blue;

        }

        .red {

        color: red;

        }

    </style>

</head>

<body>

    <div id="diamond" class="container"></div>

    <script>

        function stars() {
        // 定义一个名为“stars”的函数，用于生成并显示星星图案
        const getStars = document.getElementById('diamond');
        let lines = []; // 初始化一个空数组，用于存储生成的星星行的HTML代码
        for (let i = 0; i <= 4; i++) {// 第一个循环，生成上半部分的星星（数量递增）
        let stars = '*'.repeat(2 * i + 1);
        lines.push(`<span class="blue">${stars}</span>`);
        // 使用repeat方法生成相应数量的星星，并包裹在一个带有“blue”类的span元素中
        }
        for (let i = 4; i >= 0; i--) {// 第二个循环，生成下半部分的星星（数量递减）
        let stars = '*'.repeat(2 * i + 1);
        lines.push(`<span class="red">${stars}</span>`);
        }
        getStars.innerHTML = lines.join('<br>');
        }
        stars();// 调用stars函数，生成并显示星星图案

    </script>

</body>

</html>